<template>
  <div class="nav-header">
    <el-icon class="fold-menu" @click="handleFoldClick">
      <fold v-if="!isFold" />
      <expand v-else />
    </el-icon>
    <div class="content">
      <!-- <div>面包屑</div> -->
      <hy-breadcurmb :breadcurmbs="breadcurmbs"/>
      <div>
         <el-dropdown>
            <div class="el-dropdown-link">
              <el-avatar :size="28" :src="circleUrl"></el-avatar>
              <span>{{name}}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleExitClick">退出登录</el-dropdown-item>
                <el-dropdown-item divided>用户信息</el-dropdown-item>
                <el-dropdown-item>系统管理</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent , ref , computed} from "vue";
import {Fold , Expand  } from '@element-plus/icons';
import { useStore } from '@/store';
import HyBreadcurmb , {IBreadcurmb} from '@/base-ui/breadcurmb';
import { useRoute, useRouter } from 'vue-router';
import { pathMapBreadcurmbs } from '@/utils/map-menus'
import localCache from '@/utils/cache'
export default defineComponent({
  components:{
    Fold,
    Expand,
    HyBreadcurmb,
  },
  emits:['foldChange'],
  setup(props,{emit}) {
    const isFold = ref(false)
    const handleFoldClick = () => {
      isFold.value = !isFold.value
      emit('foldChange',isFold.value)
    }
    const store = useStore()
    const name = computed(() => store.state.login.userInfo.name)
    const circleUrl ='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    const router = useRouter();
    //面包屑的数据：[{name:,path:}]
    const breadcurmbs= computed(() => {
      const route = useRoute();
      const userMenus = store.state.login.userMenus;
      const currentPath = route.path
      return pathMapBreadcurmbs(userMenus,currentPath)
    })
    //退出登录
    const handleExitClick = () => {
      localCache.deleteCache('token')
      router.push('/main')
    }
    return {
      isFold,
      handleFoldClick,
      name,
      circleUrl,
      breadcurmbs,
      handleExitClick,
    }
  }
})
</script>

<style lang="less" scoped>
.nav-header{
  display: flex;
  width: 100%;
  .fold-menu{
    font-size: 30px;
    cursor: pointer;
  }
  .content{
    flex:1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
  }
  .el-dropdown-link{
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
</style>
